<template>
  <div class="recommended">
    <div class="reco_header">
      <top-bar :barObj="barObj"/>
    </div>
    <div class="content">
      <type-list :gameListArr="gameListArr"/>
    </div>
  </div>
</template>
<script>
import topBar from "@/components/topBar";
import typeList from "./com/typeList";
import { JYEGameList } from "../../api.js";

export default {
  name: "recommended",
  data() {
    return {
      barObj: {
        isBack: true,
        backVal: "游戏",
        title: "推荐游戏",
        isIcon: true
      },
      gameListArr: []
    };
  },
  components: {
    topBar,
    typeList
  },
  mounted() {
    this.getGameList();
  },
  methods: {
    async getGameList() {
      let {
        status,
        data: { EntityList }
      } = await JYEGameList({
        MC: "1"
      });
      if (status === 200) {
        this.gameListArr = EntityList;
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.recommended {
  .reco_header {
    height: 2.33rem;
    background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));
    box-sizing: border-box;
    padding-top: 0.54rem;
  }

  .content {
    position: relative;
    top: -30px;
    width: 7.1rem;
    margin: 0 auto;
  }
}
</style>

